<template>
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange   "
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="currentSize"
      :page-sizes="[10,20,30,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 页码
      currentPage: this.pageIndex,
      // 每页数量
      currentSize: this.pageSize
    };
  },
  props: ["total", "pageIndex", "pageSize"],
  methods: {
    // 分页器的功能
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    }
  },
  watch: {
    result(val) {
      //新增result的watch，监听变更并同步到data的数据上
      this.pageIndex = val;
    },
    result1(val) {
      //新增result的watch，监听变更并同步到data的数据上
      this.pageSize = val;
    }
  }
};
</script>